<template>
  <footer class="footer">
    <div class="circle"></div>
    <ul>
      <router-link to="/home" tag="li">
        <img src="@/../public/img/footer/home.png" alt="首页" />
        <img class="active" src="@/../public/img/footer/ahome.png" alt="首页" />
        <p>首页</p>
      </router-link>
      <router-link to="/quanquan" tag="li">
        <img src="@/../public/img/footer/qq.png" alt="圈圈" />
        <img class="active" src="@/../public/img/footer/aqq.png" alt="圈圈" />
        <p>圈圈</p>
      </router-link>
      <router-link to="/peipei" tag="li" class="pp">
        <img src="@/../public/img/footer/pp.png" alt="配配" />
        <img class="active" src="@/../public/img/footer/app.png" alt="配配" />
        <div></div>
        <p>配配</p>
      </router-link>
      <router-link to="/liaoliao" tag="li">
        <img src="@/../public/img/footer/msg.png" alt="聊聊" />
        <img class="active" src="@/../public/img/footer/amsg.png" alt="聊聊" />
        <p>聊聊</p>
      </router-link>
      <router-link to="/user" tag="li">
        <img src="@/../public/img/footer/user.png" alt="我的" />
        <img class="active" src="@/../public/img/footer/auser.png" alt="我的" />
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.footer {
    @include rect(100%, 0.52rem);
    border-top: 1px solid rgba(228,228,228,1);
    margin-top: 0.2rem;
    position: relative;
    bottom: 0;
    .circle {
      width: 0.5rem;
      height: 0.5rem;
      background-color: white;
      border-top: 1px solid rgba(228,228,228,1);
      position: absolute;
      top: -16px;
      left: 50%;
      margin-left: -0.25rem;
      border-radius: 50%;
    }
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex(); // flex: 1;
        @include rect(auto, 100%);
        // 水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
        &.router-link-exact-active,.router-link-active {
          @include color(#685DF1);
          .active {
            display: block;
          }
          img {
            display: none;
          }
        }
        img {
          width: 34px;
        }
        .active {
          display: none;
        }
        p {
          @include font-size(12px);
        }
      }
      .pp {
        position: relative;
        img {
          width: 40px;
          position: absolute;
          top: -10px;
        }
        div {
          width: 40px;
          height: 40px;
        }
      }
    }
}
</style>
